<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--表格渲染-->
      <el-table
        ref="table"
        border
        v-loading="loading"
        :data="tableData"
        size="small"
        height="700"
        style="width: 100%;"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="55" label="序号" />
        <el-table-column label="往来单位编码" prop="contactCode" />
        <el-table-column label="往来单位名称" prop="contactName" />
        <el-table-column label="单据编码" prop="orderCode">
          <template slot-scope="scope">
            <div class="codeJump" @click="jump(scope.row)">{{ scope.row.orderCode }}</div>
          </template>
        </el-table-column>
        <el-table-column label="单据类型" prop="orderType" />
        <el-table-column label="应付金额" prop="paymentAmount" />
        <el-table-column label="应收金额" prop="receiveAmount" />
        <el-table-column label="收款金额" prop="customerReceiveBalance" />
        <el-table-column label="付款金额" prop="supplierPaymentBalance" />
      </el-table>
      <!--分页组件-->
      <pagination :page.sync="query.page" :limit.sync="query.size" :total="total" @pagination="initData" />
    </div>
  </div>
</template>

<script>
import { queryDetail } from '@/api/erp/reportReceivePayment'
import Pagination from '@/components/Pagination'
import VSelect from '@/components/VSelect'
import JtgTree from '@/components/Tree/JtgTreePlus'

const defaultForm = {}
export default {
  name: 'reportSalePromotionDetail',
  components: {
    Pagination,
    VSelect,
    JtgTree
  },
  dicts: ['t_sales_promotion_customer_group_type'],
  data() {
    return {
      loading: false,
      downloadLoading: false,
      tableData: [],
      total: 0,
      query: {
        page: 1,
        size: 10
      },
      dataForm: {
        contactId: this.$route.params.id,
        busDate: [],
        customerAreaIds: [],
        customerTypeIds: [],
        customerBaseType: '',
        userIds: [],
        deptIds: [],
        pCustomerIds: '',
        sCustomerIds: ''
      },
      jumpPath: {
        '销售订单': '/sale/salesorderDetail/',
        '销售退货': '/sale/salesorderDetail/',
        '采购订单': '/buy/buyOrderDetail/',
        '采购退货': '/buy/buyOrderDetail/',
        '采购费用': '/fee/feeOrderDetail/',
        '销售费用': '/fee/feeOrderDetail/',
        '回瓶回箱': '/ware/wareReturnBottleBoxDetail/',
        '付款单': '/finance/financeSupplierPaymentDetail/',
        '收款单': '/finance/financeCustomerReceiptDetail/',
      }
    }
  },
  activated() {
    this.dataForm = Object.assign(this.dataForm, this.$route.query)
    this.initData()
  },
  methods: {
    doQuery() {
      this.query.page = 1
      this.initData()
    },
    doReset() {
      this.dataForm = Object.assign({}, defaultForm, { contactId: this.$route.params.id })
      this.initData()
    },
    initData() {
      this.loading = true
      const { busDate, customerAreaIds, customerTypeIds, deptIds } = this.dataForm
      const [startDate, endDate] = busDate || []
      const data = Object.assign({}, this.dataForm, this.query, {
        startDate,
        endDate,
        customerAreaIds: customerAreaIds.join(),
        customerTypeIds: customerTypeIds.join(),
        deptIds: deptIds.join()
      })
      queryDetail(data).then((res) => {
        this.tableData = res.data.content
        this.total = res.data.totalElements
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    jump(row) {
      console.log(this.jumpPath[row.orderType] + row.orderId)
      this.$router.push({ path: this.jumpPath[row.orderType] + row.orderId })
    }
  }
}
</script>

<style lang="scss" scoped>
.table-img {
  display: inline-block;
  text-align: center;
  background: #ccc;
  color: #fff;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  line-height: 32px;
}

.flex {
  display: flex;
}

.fow-reverse {
  flex-direction: row-reverse;
}

.codeJump {
  color: blue;
}
</style>
